<script setup>
import { ref, provide, onBeforeMount, onMounted } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import SideMenu from './components/layout/SideMenu.vue'
import TagsView from './components/layout/TagsView.vue'

const router = useRouter()

// 用于缓存和标签管理的数据
const cachedViews = ref([])
const visitedViews = ref([])

// 初始化标签数据
onBeforeMount(() => {
  // 确保首页标签存在
  addHomeTag()
})

// 初始化路由
onMounted(() => {
  // 导航到首页
  if (router.currentRoute.value.path === '/') {
    // 已经在首页，无需重定向
  } else {
    router.push('/')
  }
})

// 添加首页标签
function addHomeTag() {
  // 如果已经存在首页标签，则不添加
  if (visitedViews.value.some(v => v.path === '/')) {
    return
  }

  // 添加首页标签
  visitedViews.value.push({
    path: '/',
    name: 'home',
    title: '首页',
    meta: {
      title: '首页',
      keepAlive: true
    },
    fixed: true
  })

  // 添加到缓存
  if (!cachedViews.value.includes('home')) {
    cachedViews.value.push('home')
  }
}

// 提供给子组件使用
provide('tagsView', {
  cachedViews,
  visitedViews,
  addVisitedView: (view) => {
    // 不添加分屏页面作为标签
    if (view.path === '/split-screen') return

    if (visitedViews.value.some(v => v.path === view.path)) return
    const title = view.meta?.title || '未命名页面'
    visitedViews.value.push(
      Object.assign({}, view, {
        title: title
      })
    )
  },
  addCachedView: (view) => {
    if (cachedViews.value.includes(view.name)) return
    if (view.meta?.keepAlive) {
      cachedViews.value.push(view.name)
    }
  },
  delVisitedView: (view) => {
    // 不允许删除固定标签（首页）
    if (view.fixed) return

    const index = visitedViews.value.findIndex(v => v.path === view.path)
    if (index > -1) {
      visitedViews.value.splice(index, 1)
    }
  },
  delCachedView: (view) => {
    const index = cachedViews.value.indexOf(view.name)
    if (index > -1) {
      cachedViews.value.splice(index, 1)
    }
  }
})
</script>

<template>
  <div class="app-container">
    <!-- 左侧菜单 -->
    <div class="sidebar-container">
      <SideMenu />
    </div>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 顶部标签栏 -->
      <div class="tags-view-container">
        <TagsView />
      </div>

      <!-- 内容区域 -->
      <div class="app-main">
        <router-view v-slot="{ Component }">
          <keep-alive :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  overflow: hidden;
}

#app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100vw;
  overflow: hidden;
}

.app-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.sidebar-container {
  width: 220px;
  height: 100%;
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.tags-view-container {
  height: 40px;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
  position: relative;
  z-index: 9;
}

.app-main {
  flex: 1;
  overflow: auto;
  padding: 0;
  background-color: #f0f2f5;
  position: relative;
}
</style>
